/*font for the whole page*/
*{
    font-family:verdana;
    /*border: 1px solid blue;*/
}
/*remove margin to fit flush at the top and side*/
body{
    overflow: hidden;
    margin: 0px;
}

/*style for all buttons */
.button{
    background-color: #35976A;
    border-radius: 5px;
    color: antiquewhite;
    font-size: 20px;
}

/*div for the input*/
.input{
    float: right;
    width:18%;
    height:520px;
    background: #EADFA1;
    margin-right:10px;
    /*z-index: -1;*/
}

/*div to hold the topic buttons*/
.buttonHolder{
    background-color: #EADFA1;
    width:100%;
    /*position: fixed;*/
    top: 0;
}

/*line for add check and clear button*/
.header{
    font-weight: 700;
    font-size: 40px;
    color: #2D4739;
}

/*container holds main divs*/
.outline{
    width:100vw;
    height:100vh;
    background: #EADFA1;
}

/*for clear fix*/
.outline:after{
    content: "";
    display: table;
    clear: both;
}

/*style for topic button*/
.giphyButton{
    /*width: 100px;
    height: 20px;*/
    margin:5px;
    border-radius:12px;
}

/*holder for image*/
.gifHolder{
    float: left;
    height: 520px;
    width: 80%;
    overflow:scroll;
}

/*style fr picture*/
.gif{
    height: 200px;
    width: 200px;
    /*border: 1px solid black;*/
}

/*smaller picture for favorite*/
.smallGif{
    height: 50px;
    width: 50px;
    /*border: 1px solid black;*/
}

/* holds the cards*/
.cardHolder{
    display: block;
    float: left;
    height: 250px;
    width: 250px;
    /*border: 1px solid black;*/
    text-align: center;
    margin:5px;
    border-radius: 12px;
    background-color: antiquewhite;
}

/*holds favorite cards*/
.smallCardHolder{
    display: block;
    float: left;
    height: 75px;
    width: 75px;
    /*border: 1px solid black;*/
    text-align: center;
    margin:15px;
    border-radius: 12px;
    background-color: antiquewhite;

}

/*rating on the card*/
.rating{
    height: 18px;
    width: 249px;
}

/*smaller rating for favorites*/
.smallRating{
    height: 8px;
    width: 75px;
    font-size: 4px;
}

/*textbox to enter new button text*/
#cartoonName{
    margin:5px;
    width: 95%;
}

/*check box for adding GIFS vs replacing gifs*/
.check{
    display:inline-block;
    background-color: #2D4739;
}

/*title at the op of the card*/
.title{
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*small title for the top of the favorite card*/
.smallTitle{
    font-size: 4px;
    height: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*submit button*/
.submit{
    width:100%;
}

/*button to display favoites*/
.favButton{
    width:100%;
}

/*label for input section*/
.label{
    text-align: center;
    font-size: 20px;
}

/*tooltip  sizing*/
.tooltip {
    position: relative;
    display: inline-block;
    font-size: 20px;
   /* border-bottom: 1px dotted black;*/
  }
  
  /*tool tip styling*/
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 240px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
  }
  
  /*make tool tip show up*/
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

  /*holds check box*/
  .checkHolder{
      background: #2D4739;
      color: antiquewhite;
      width: 100%;
      height: 45px;
  }

  /* styling for add gifs checkbox*/
  .checkbox{
      background: transparent;
      float:left;
      height: 43px;
  }

  /*button to clear current gifs*/
  .cancel{
      float: right;
      position: relative;
      top:7px;
      margin-right: 10px;
  }

/*spacing for check box*/
fieldset{
    border: 0px;
    margin:4px;
}

/*style for favorite button*/
.favorite{
      position: relative;
      top: -20px;
      float:right;
      background-color: #35976A;
      margin-right: 5px;
  }

  /*smaller version of the favorite*/
  .smallFavorite{
    position: relative;
    top: -20px;
    float:right;
    background-color: #35976A;
    margin-right: 5px;
}
    /*turn favorite red when selected*/
  .favoriteTrue{
    background-color: #BA1616;
  }

    /*turn favorite green when not selected*/
  .favoriteFalse{
    background-color: #35976A;
  }

  /*div to hold the favorite thumbnails*/
  .favoriteHolder{
      background-color: transparent;
      height: 70%;
      overflow:scroll;
  }

  
/**change style based on screen size **/
@media screen and (max-width: 1299px) {
    .input{
        width: 233px;
        /*top:70px;*/
    }
    .cardHolder{
        margin-left: 40px;
        margin-right: 40px;
    }
    .gifHolder{
        width:80%;
        /*top: 60px;*/
    }
}

@media screen and (max-width: 1281px){
    .gifHolder{
        width:80%;
    }
    .cardHolder{
        margin-left:30px;
        margin-right:30px;
    }
    
}

@media screen and (max-width: 1241px){
    .gifHolder{
        width:78%;
    }
    .cardHolder{
        margin-left:20px;
        margin-right:20px;
    }
}

@media screen and (max-width: 1146px){
    .gifHolder{
        width:76%;
    }
    .cardHolder{
        margin-left:10px;
        margin-right:10px;
    }
}

@media screen and (max-width: 1100px){
    /*.gifHolder{
        width:78%;
    }*/
    .cardHolder{
        margin-left:60px;
        margin-right:60px;
    }
}


@media screen and (max-width: 1100px){
    .gifHolder{
        width:72%;
    }
    .cardHolder{
        margin-left:50px;
        margin-right:50px;
    }
}

@media screen and (max-width: 1004px){
    .gifHolder{
        width:74%;
    }
    .cardHolder{
        margin-left:45px;
        margin-right:45px;
    }
}

@media screen and (max-width: 980px) {
    .input{
        width: 180px;
        /*top:70px;*/
    }
    .cardHolder{
        margin-left: 40px;
        margin-right: 40px;
    }
    .gifHolder{
        width:75%;
        /*top: 60px;*/
    }
}
@media screen and (max-width: 925px){
    .input{
        width:180px;
        /*right:5px;*/
        /*top:70px;*/
    }
    .cardHolder{
        margin-left:30px;
        margin-right:30px;
    }
    .gifHolder{
        width:75%;
        /*top: 60px;*/
    }
}
@media screen and (max-width: 870px){
    .input{
        width: 130px;
    }
    .cardHolder{
        margin-left: 10px;
        margin-right: 10px;
    }
    .gifHolder{
        width:75%;
        /*top: 60px;*/
    }
}

@media screen and (max-width: 768px) {
    .gifHolder{
        width:75%;
    }
    .cardHolder{
        margin-left:125px;
    }
}
@media screen and (max-width: 640px) {
    .gifHolder{
        width:65%;
        /*top:85px;*/
    }
    .cardHolder{
        margin-left:45px;
    }
    /*.input{
        top:96px;
    }*/
}
@media screen and (max-width: 545px) {
    .gifHolder{
        width:60%;
    }
    .cardHolder{
        margin-left:10px;
    }
}
@media screen and (max-width: 490px) {
    .gifHolder{
        width:65%;
    }
    .cardHolder{
        margin-left:5px;
        margin-right: 5px;
    }

    .input{
        width: 130px;
    }
}